Codea’s New Autocomplete

Codea 3.3 arrives today with brand new autocomplete. In case you’re new here, Codea is a creative coding app for iOS. You can learn more here

tl;dr you can skip straight to the write-up on what’s new in autocomplete

Old Design

This is what we’re replacing. The teal coloured bar pops up above the keyboard as you type, with the downside that it overlaps your code. Codea would compensate for this by scrolling a little more to ensure the text insertion caret was always visible above the autocomplete bar

The old autocomplete bar overlaps your code

A few weeks ago a user reported an innocent sounding bug on the forums which ended up on to my todo list:

  • Placing cursor near top of keyboard is jumpy

Have you ever had to fix a tiny bug, and in doing so you realise there’s no solution except to rip everything apart and re-think the way the feature works? That was this kind of bug

What was happening here was that placing the text insertion point near the top of the keyboard caused everything to scroll up a bit

I realised that this was happening because many years ago I had fixed an earlier bug — namely that the autocomplete bar could overlap where you were typing. To fix this I increased the amount the code editor scrolled to ensure that the text insertion caret could never be overlapped by the autocomplete bar

There was no good way to fix the scrolling issue while having autocomplete live above the keyboard. So I moved the autocomplete UI, and in doing so implemented many of the features I’d always wanted

New Design

The first thing to do was move the bar somewhere else. Desktop editors use a popup window which appears near the insertion point

Xcode’s autocomplete UI

This is good when you use a keyboard and mouse, but I wanted to make Codea feel great when you’re coding on the couch, in portrait mode, with your thumbs on the software keyboard. (Codea also works great with the Magic Keyboard and trackpad, but that’s a bonus)

I kept the horizontal design and could only think of one place to move autocomplete — into the keyboard accessory buttons. It would replace them, temporarily, when Codea needed to show completions

Planned position for the new autocomplete UI

Even though the bar was moving here I chose to keep the play button always visible. I also added a way to dismiss autocomplete so that people could see the keyboard buttons if necessary

I used this opportunity to add things I had been wanting to add for years, as Codea’s original autocomplete code was now nearly ten years old. Ten years! 

The first thing I wanted was scrolling for long lists of completions. The old autocomplete UI would show completions off the screen, and the only way to get to them was to keep typing

In order to add scrolling and keep the play button visible I had to figure out what happened when the completions passed underneath the play button. I used a CALayer mask to cut them off with a gradient so they would fade out as they passed underneath

Now for the rest of the features I wanted to add

Features

I spent a huge amount of time adding everything I’ve always wanted to this new version of autocomplete, here’s what’s new

It has syntax highlighting

Syntax highlighting makes it easier to see the possible completions in context

And asset icons — This is really cool. Codea has a statically typed asset API which monitors the file system. So when autocompleting assets, you get icons indicating file types and directory types alongside the autocomplete suggestions

Here you can see that in my project — by typing asset. — I have some Lua files, a background image, and some data

Previews too — Taking it further, when you long press an asset completion Codea gives you an instant preview of that file. You can quickly check what a sprite looks like, or even listen to a sound file or audio track

Instant documentation — Notice some of the completions are underlined? Long press these to instantly see their documentation

Keyboard support — I said earlier I want Codea to work great with the software keyboard, but that doesn’t exclude great hardware keyboard support. You can navigate through the completion list with the left and right arrow keys, and use tab or return to select a completion

It’s more accessible — the new autocomplete bar scales with the editor’s font size

Goodbye Old Autocomplete

The old autocomplete code lasted ten years. Now it’s gone and there’s a lot of complexity and subtlety in its replacement, but I hope the trade-off is worth it

Liked this? Let me know on Mastodon

You'll get new posts delivered to your inbox and the occasional update

About Codea

Codea is a creative coding app for iOS by Simeon Saens and John Millard. We’ve been working on it for ten years. I maintain the front-end and code editor features, while John works hard on the rendering system. We also make Shade